@import 'common';

@tag-color: #f48f18;
@boder-color: #ddd;
@cart-footer-button: #ccc;

body {
    font-family: PingFangSC-Light,helvetica,'Heiti SC';
}

.cart-container {
    margin-top: .65rem;
    .container-ensure {
        padding: .1rem .2rem;
        .ensure-list {
            display: flex;    
            justify-content: space-between;
            padding: 0;
            padding-left: .2rem;  
            li {
                padding-left: 0;
                list-style-type: circle;
                font-size: .16rem;
                color: @font-medium-color;
            }
        }
    }
    
    .container-benefit {
        padding: .2rem;
        font-size: .18rem;
        background: @inner-background;
        .benefit-check {
            float: right;
            color: @font-medium-color;
        }
        .benefit-left {
            color: @font-medium-color;
            i {
                display: inline-block;
                padding: .05rem .1rem;
                color: @tag-color;
                font-size: .14rem;
                font-style: normal;
                border: .01rem solid @tag-color;
            }
        }
    }
    
    .container-goods {
        display: flex;
        margin-top: .15rem;
        padding: .2rem;
        background: @inner-background;
        vertical-align: middle;
        .goods-checkbox {
            position: relative;
            top: .5rem;
            flex: 1;
        }
        
        .goods-details {
            display: flex;
            width: 95%;
            .details-pic {
                width: 20%;
                img {
                    width: @width;
                    background: @background;
                }
            }
            .details-spec{
                flex: 1;
                .spec-color {
                    text-align: right;
                }
                
                .spec-numchange {
                    .numchange-money {
                        margin-top: -.5rem;
                        font-size: .2rem;
                        color: @font-dark-color;
                    } 
                    .numchange-button-wrapper {
                        display: flex;
                        float: right;
                        width: 1.8rem;
                        text-align: center;
                        font-size: .2rem;
                        color: @font-medium-color;
                        border: .01rem solid @boder-color;
                        div {
                            flex: 1;
                            padding: .1rem;
                            border-left: .01rem solid @boder-color;
                        }
                        .first {
                            border: 0;
                        }
                    }
                }
            }
        }
    }
}

.cart-footer {
    position: fixed;
    bottom: 0;
    display: flex;
    width: @width;
    line-height: .7rem;
    font-size: .2rem;
    background: @inner-background;
    .footer-checkbox {
        width: 75%;
        padding-left: .2rem;
        color: @font-medium-color;
    }
    .footer-button {
        flex: 1;
        text-align: center;
        color: @font-light-most-color;
        background: @cart-footer-button;
    }
}
